<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="180px"
      label-position="top"
      :rules="rules">
    <el-divider content-position="left" class="!mb-[40px]"><span class="text-xl">主体信息</span></el-divider>
    <el-form-item label="主体名称" prop="name">
      <el-input v-model="ruleForm.name" type="password" autocomplete="off" placeholder="主体名称由1~60位字符组成" />
    </el-form-item>
    <el-form-item label="证件类型" prop="idType" v-if="['enterprise', 'cooperative'].includes(computedAccountType)">
      <el-select-v2
          v-model="ruleForm.idType"
          placeholder="请选择证件类型"
          :options="idTypeOptions"
          class="w-full"
      />
    </el-form-item>
    <el-form-item label="企业注册号" prop="idRegisterNumber" v-if="['enterprise', 'cooperative'].includes(computedAccountType)">
      <el-input v-model="ruleForm.idRegisterNumber" placeholder="无组织机构代码的企业号由18位字符组成，有组织机构代码的企业号由15位字符组成" />
    </el-form-item>
    <el-form-item label="组织机构代码" prop="organizationCode" v-if="['common'].includes(ruleForm.idType)">
      <el-input v-model="ruleForm.organizationCode" placeholder="组织机构代码由10位字符组成，格式为xxxxxxxx-x" />
    </el-form-item>
    <el-form-item label="主体类型" prop="subjectType">
      <el-radio-group v-model="ruleForm.subjectType">
        <el-radio v-for="(item, idx) of subjectTypeOptions" :label="item.label" :key="idx" />
      </el-radio-group>
    </el-form-item>
    <!--<el-form-item label="主体属性" prop="subjectAttr">-->
    <!--  <el-checkbox-group v-model="ruleForm.subjectAttr">-->
    <!--    <el-checkbox v-for="(item, idx) of subjectAttrOptions" :key="idx" :label="item.label" name="type" />-->
    <!--  </el-checkbox-group>-->
    <!--</el-form-item>-->
    <el-form-item label="所属行业" prop="industry">
      <el-checkbox-group v-model="ruleForm.industry">
        <el-checkbox v-for="(item, idx) of industryOptions" :key="idx" :label="item.label" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input v-model="ruleForm.address" placeholder="地址由1-60个字符组成" />
    </el-form-item>

    <el-divider content-position="left" class="!mt-[90px] !mb-[40px]"><span class="text-xl">法定代表人信息</span></el-divider>

    <el-form-item label="法定代表人姓名" prop="legalRepresentative" v-if="!['farm'].includes(ruleForm.accountType)">
      <el-input v-model="ruleForm.legalRepresentative" placeholder="法人姓名由2-8个字符组成" />
    </el-form-item>
    <el-form-item label="法定代表人证件号码" prop="idNumber" v-if="!['farm', 'personal'].includes(ruleForm.accountType)">
      <el-input v-model="ruleForm.idNumber" placeholder="身份证号由18位组成" />
    </el-form-item>
    <el-form-item label="法定代表人联系电话" prop="phoneNumber" v-if="!['farm', 'personal'].includes(ruleForm.accountType)">
      <el-input v-model="ruleForm.phoneNumber" placeholder="示例13100000000或028-88888888" />
    </el-form-item>
    <el-form-item label="自然人" prop="naturalPerson" v-if="['personal'].includes(ruleForm.accountType)">
      <el-input v-model="ruleForm.naturalPerson" placeholder="自然人姓名由2-8个字符组成" />
    </el-form-item>

    <el-divider content-position="left"  class="!mt-[90px] !mb-[40px]" v-if="['enterprise', 'cooperative'].includes(computedAccountType)"><span class="text-xl">主体证照信息</span></el-divider>
    <el-form-item label="主体证照" prop="businessLicence" v-if="['enterprise', 'cooperative'].includes(computedAccountType)">
      <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="(uploadFile, uploadFiles) => handleChange(uploadFile, uploadFiles, 'businessLicence')">
        <el-icon><Plus /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="ruleForm.businessLicence" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file, 'businessLicence')"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
              <!--<span-->
              <!--    v-if="!disabled"-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleDownload(file, 'businessLicence')"-->
              <!--&gt;-->
              <!--  <el-icon><Download /></el-icon>-->
              <!--</span>-->
              <!--<span-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleRemove(file, 'businessLicence')"-->
              <!--&gt;-->
              <!--  <el-icon><Delete /></el-icon>-->
              <!--</span>-->
            </span>
          </div>
        </template>
      </el-upload>
    </el-form-item>

    <el-divider content-position="left" class="!mt-[90px] !mb-[40px]"><span class="text-xl">法定代表人证照信息</span></el-divider>
    <el-form-item label="法定代表人证照" prop="authorize">
      <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="(uploadFile, uploadFiles) => handleChange(uploadFile, uploadFiles, 'authorize')">
        <el-icon><Plus /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="ruleForm.authorize" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file, 'authorize')"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
              <!--<span-->
              <!--    v-if="!disabled"-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleDownload(file, 'authorize')"-->
              <!--&gt;-->
              <!--  <el-icon><Download /></el-icon>-->
              <!--</span>-->
              <!--<span-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleRemove(file, 'authorize')"-->
              <!--&gt;-->
              <!--  <el-icon><Delete /></el-icon>-->
              <!--</span>-->
            </span>
          </div>
        </template>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from 'vue'
import type { FormInstance, FormRules, UploadFile, UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

const ruleFormRef = ref<FormInstance>()

const accountTypeOptions = [
  { label: '企业/个人工商户', value: 'enterprise' },
  { label: '合作社', value: 'cooperative' },
  { label: '家庭农场', value: 'farm' },
  { label: '个人', value: 'personal' },
];
const idTypeOptions = [
  { label: '三证合一营业执照（无独立组织机构代码证）', value: 'super' },
  { label: '普通营业执照（有独立组织机构代码证）', value: 'common' },
]
const subjectTypeOptions = [
  { label: '生产主体', value: 'produce' },
  { label: '经营主体', value: 'deal' },
  { label: '生产经营主体', value: 'merge' }
]
const subjectAttrOptions = [
  { label: '一般主体', value: 'general-subject' },
  { label: '屠宰场', value: 'slaughterhouse' },
  { label: '生鲜乳企业', value: 'fresh-milk-enterprises' },
  { label: '加工企业', value: 'processing-enterprises' }
]
const industryOptions = [
  { label: '畜禽养殖', value: 'livestock-breeding' },
  { label: '水产养殖', value: 'aquaculture' },
  { label: '种植业', value: 'planting' },
  { label: '农产品加工', value: 'agricultural-products-processing' },
  { label: '农产品批发', value: 'agricultural-products-wholesale' },
  { label: '农业服务', value: 'agricultural-services' },
  { label: '其他', value: 'other' },
]

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const ruleForm = reactive({
  name: '', // 主体名字
  idType: undefined, // 证件类型
  idRegisterNumber: '', // 企业注册号
  legalRepresentative: '', // 法定代表人
  idNumber: '', // 证件号码
  naturalPerson: '', // 自然人
  organizationCode: '', // 组织机构代码
  subjectType: '', // 主体类型
  subjectAttr: [], // 主体属性
  industry: [], // 所属行业
  address: '', // 详细地址
  phoneNumber: '', // 联系电话
  businessLicence: '', // 营业执照
  authorize: '', // 授权书
})

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}
const computedAccountType = computed(() => {
  console.log()
  return ruleFormRef.value?.$parent?.$parent?.$refs.baseFormRef.ruleForm.accountType;
})

const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ required: true, message: '主体名称由1~60位字符组成', trigger: 'change' }],
  idType: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
  idRegisterNumber: [{ required: true, message: '请输入企业注册号', trigger: 'change' }],
  legalRepresentative: [{ required: true, message: '法人姓名由2-8个字符组成', trigger: 'change' }],
  idNumber: [{ required: true, message: '请输入您的证件号', trigger: 'change' }],
  naturalPerson: [{ required: true, message: '自然人姓名由2-8个字符组成', trigger: 'change' }],
  organizationCode: [{ required: true, message: '请输入组织机构代码', trigger: 'change' }],
  subjectType: [{ required: true, message: '请选择主体类型', trigger: 'change' }],
  subjectAttr: [{ required: true, message: '请选择主体属性', trigger: 'change' }],
  industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
  address: [{ required: true, message: '请输入地址', trigger: 'change' }],
  phoneNumber: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
  businessLicence: [{ required: true, message: '请上传主体证照', trigger: 'change' }],
  authorize: [{ required: true, message: '请上传法定代表人证照', trigger: 'change' }],
})

const handlePictureCardPreview = (file: UploadFile, type: string) => {
  ruleForm[type] = file.url!
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile, type: string) => {
  console.log(file)
}

const handleRemove = (file: UploadFile, type: string) => {
  ruleForm[type] = '';
  dialogImageUrl.value = ''
  dialogVisible.value = false
}

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles, type) => {
  // fileList.value = fileList.value.slice(-3)
  ruleForm[type] = uploadFile.url;
}

defineExpose({
  ruleFormRef,
  ruleForm,
  rules,
})
</script>

<style lang="scss" scoped>

</style>
